<template>
  <div class="app-container"
    v-loading="loading"
    element-loading-text="加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.6)">
    <div class="title">
      <div class="left"><span class="circle"></span>{{projectName}}</div>
      <div class="right">
        <el-button type="primary" v-show="isDisabled||instId" size="small" @click="handelBpm">查看审批流程</el-button>
        <el-button type="primary" v-show="!isDisabled" size="small" @click="handelSaveFn('0')">暂存</el-button>
        <el-button size="small" v-show="!isDisabled" @click="handelSaveFn('1')">提交</el-button>
      </div>

    </div>
    <div class="context-warp" style=" overflow: hidden;">
      <div class="page-form-item ">
        <label class="page-form-item-label">
          <span class="page-form-item-label__text">项目名称</span>
        </label>
        <div class="page-form-item-content">
          {{pigfarmName}}
        </div>
      </div>

      <div class="page-form-item ">
        <label class="page-form-item-label">
          <span class="page-form-item-label__text">合同名称</span>
        </label>
        <div class="page-form-item-content">
          <el-select
            @change="handelChangeProject"
            v-model="contractId"
            filterable
            remote
            reserve-keyword
            placeholder="请输入关键词"
            :remote-method="remoteMethod"
            >
            <el-option
              v-for="item in contractListData"
              :key="item.id"
              :label="item.contractTitle"
              :value="item.id">
            </el-option>
          </el-select>
        </div>
      </div>

      <div class="page-form-item ">
        <label class="page-form-item-label">
          <span class="page-form-item-label__text">流程状态</span>
        </label>
        <div class="page-form-item-content">
          <span v-show="bpmStatus == '' || bpmStatus == 'save' || bpmStatus == null ">待提交</span>
          <span v-show="bpmStatus == 'active'">审批中</span>
          <span v-show="bpmStatus == 'completed'">审批完成</span>
          <span v-show="bpmStatus == 'cancel'">作废、取消、删除</span>
          <span v-show="bpmStatus == 'reject'">退回、驳回</span>
        </div>
      </div>

    </div>
    <div style="text-align:right;padding-right:15px">
      <el-button type="primary" size="small" v-show="!isDisabled" @click="handelAdd">新增</el-button>
    </div>
    <div class="context-warp" style=" overflow: hidden;">
      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column label="场区" width="150">
          <template slot-scope="scope">
            <el-select size="small" v-model="scope.row.areaDictId" :disabled="isDisabled" placeholder="请选择">
              <el-option
                v-for="item in areaList"
                :key="item.value"
                :label="item.value"
                :value="item.id">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="单体编号/名称">
          <template slot-scope="scope">
            <el-input size="small" v-model="scope.row.nodeName" :disabled="isDisabled" maxlength="30" placeholder="请输入内容"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="改造事项">
          <template slot-scope="scope">
            <el-input size="small" v-model="scope.row.remark" :disabled="isDisabled" maxlength="200" placeholder="请输入内容"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="工作量">
          <template slot-scope="scope">
            <el-input type="number" v-model="scope.row.workLoad"
            :disabled="isDisabled" size="small" maxlength="20"
            oninput="if(value>999999999)value=999999999;value = Number(value.toString().match(/^\d+(?:\.\d{0,1})?/));"
            placeholder="请输入工作量"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="计划开始">
          <template slot-scope="scope">
            <el-date-picker
              style="width:100%"
              :disabled="isDisabled"
              size="small"
              v-model="scope.row.planStartDate"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请填时间"
            ></el-date-picker>
          </template>
        </el-table-column>
        <el-table-column label="计划结束">
          <template slot-scope="scope">
            <el-date-picker
              size="small"
              style="width:100%"
              :disabled="isDisabled"
              v-model="scope.row.planEndDate"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请填时间"
            ></el-date-picker>
          </template>
        </el-table-column>
        <el-table-column label="工期">
          <template slot-scope="scope">
            {{scope.row.planDates}}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              v-show="!scope.row.id"
              size="mini"
              type="text"
              @click="handleDelete(scope.$index)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>

<script>
import moment from 'moment'
import { getTreeselect ,addFarmInfo,getDetailsById,listSelct,getSupplierList,getContractInfoList,getBpmDataList,updateFarmInfo,updateRetunFile,getProgressList,getDictList} from "@/api/progressManagement/constructionPlan";
import { roleOption } from "@/api/auth/role";
import { getToken } from "@/utils/auth";
import { treeselect } from "@/api/auth/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import BaseIndex from '@/views/base/BaseIndex'
import FileUpload from '@/views/components/fileUpload/index.vue'
import { newWindowBpm } from "@/utils/openBpm";
import loadingSearchFormCompany from '@/views/components/loadingSearchFormCompany/index.vue'
export default {
  name: "ConstructionPlanDetails",
  components: { Treeselect , FileUpload ,loadingSearchFormCompany },
  extends: BaseIndex,
  data() {
    return {
      newWindowBpm,
      pageType:'',
      loading:false,
      isDisabled:false,
      contractId:'', // 合同Id
      contractListData:[],
      tableData:[],
      projectName:'',//顶部猪场名称
      pigfarmName:'',//立项名称
      areaList:[],//厂区列表
      progressId:'',
      instId:'', // 审批流程id - 查看审批流
      bpmStatus:''
    };
  },
  watch: {
    tableData: {
      handler(val) {
        for (let index = 0; index < val.length; index++) {
          if (val[index].planStartDate && val[index].planEndDate) {
            val[index].planDates =
              Math.floor(
                (parseInt(new Date(val[index].planEndDate).getTime()) -
                  parseInt(new Date(val[index].planStartDate).getTime())) /
                  (24 * 3600 * 1000)
              ) + 1;
          } else {
            val[index].planDates = '';
          }
        }
        this.tableData = val
      },
      deep: true
    }
  },
  created() {
    this.pageType = this.$route.query.type
    this.projectName = this.$route.query.projectName
    this.pigfarmName = this.$route.query.projectName

    if(this.$route.query.type == 'add'){

    }

    this.loading = true
    getDictList(this.$route.query.id).then(
      response => {
        if(response && response.code ===0){
          this.areaList = response.data
        }else{
          this.msgError(response.msg)
        }
        this.loading = false;
      }
    ).catch((err) => {
      this.loading = false;
    })

    getContractInfoList(this.$route.query.id).then(
      response => {
        if(response && response.code ===0){
          this.contractListData = response.data
        }else{
          this.msgError(response.msg)
        }
        this.loading = false;
      }
    ).catch((err) => {
      this.loading = false;
    })

  },
  methods: {
    handleDelete(e){
      this.tableData.splice(e, 1);
    },
    handelBpm(){
      newWindowBpm(this.instId,'1')
    },
    handelAdd(){
      this.tableData.push({})
    },
    handelChangeProject(e){// 项目下拉 change事件
      this.progressId = ''
      this.isDisabled = false
      this.instId = ''
      this.bpmStatus = ''
      var data = {
        id:e,
        projectId:this.$route.query.id
      }

      this.loading = true;
      getProgressList(data).then(
        response => {
          if(response && response.code ===0){
            if (response.data) {
              this.tableData = response.data.contractProgressNodeList || [];
              this.progressId = response.data.id;

              if (response.data.bpmInfo) {
                if (response.data.bpmInfo.status == 'active' || response.data.bpmInfo.status == 'completed') {
                  this.isDisabled = true
                }
                this.instId = response.data.bpmInfo.instId
                this.bpmStatus = response.data.bpmInfo.status
              }
            }else{
              this.tableData = []
            }
          }else{
            this.msgError(response.msg)
          }
          this.loading = false;
        }
      ).catch((err) => {
        this.loading = false;
      })

    },
    remoteMethod(query){ // 项目下拉远程搜索

    },
    handelSaveFn(e){
      for (let index = 0; index < this.tableData.length; index++) {
        const element = this.tableData[index];
        if(!element.areaDictId) {this.msgError('请选择 场区'); return false;}
        if(!element.nodeName) {this.msgError('请选择 单体编号/名称'); return false;}
        if(!element.remark) {this.msgError('请选择 改造事项'); return false;}
        if(!element.planStartDate) {this.msgError('请选择 计划开始'); return false;}
        if(!element.planEndDate) {this.msgError('请选择 计划结束'); return false;}
      }

      var para = {
        contractId:this.contractId,
        projectId:this.$route.query.id,
        contractProgressNodeList:this.tableData,
        id:this.progressId,
        status : e,
      }
      this.loading = true;
      if (this.progressId){
      // if(this.$route.query.type == 'change'){
        updateFarmInfo(para).then(
          response => {
            if(response && response.code ===0){

              if (response.data.instId) {
                newWindowBpm(response.data.instId)
              }

              this.msgSuccess("成功");
              this.$router.go(-1)
            }else{
              this.msgError(response.msg)
            }
            this.loading = false;
          }
        ).catch((err) => {
          this.loading = false;
        })
      }else{
        addFarmInfo(para).then(
          response => {
            if(response && response.code ===0){
              if (response.data.instId) {
                newWindowBpm(response.data.instId)
              }

              this.msgSuccess("成功");
              this.$router.go(-1)
            }else{
              this.msgError(response.msg)
            }
            this.loading = false;
          }
        ).catch((err) => {
          this.loading = false;
        })
      }

    },

  }
};
</script>
<style scoped  lang="scss">
.title {
  display: flex;
  justify-content: space-between;
  padding: 0 0.9375rem 0.9375rem 0.9375rem;
  // padding: 0 0.9375rem 0 0.9375rem;
  background-color: white;
  // border-bottom: 2px solid #ccc ;
  .circle {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    background-color: #4A75D0;
    margin-right: 10px;
  }
}

.context-warp {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 15px;
  margin: 15px;
  border-bottom: 1px solid #ebeef3;
  border-right: 1px solid #ebeef3;
  background-color: white;

  .page-form-item {
    width: 33.3%;
    font-size: 14px;
    font-family: "PingFangSC";
    position: relative;
    border-top: 1px solid #ebeef3;
    vertical-align: top;
    height: 66px;
    color: #4d4d4d;
    display: flex;

    .page-form-item-label {
      width: 120px;
      height: 100%;

      .icon {
        color: red;
      }
    }

    .left-border {
      position: absolute;
      height: 100%;
      width: 1px;
      left: 0;
      top: 0;
      background-color: #ebeef3;
      z-index: 999;
    }

    &-label {
      display: inline-block;
      height: calc(100% - 16px);
      background-color: #f9fafd;
      border-right: 1px solid #ebeef3;
      border-left: 1px solid #ebeef3;
      text-align: center;

      .require {
        display: inline-block;
        width: 8px;
        color: #f56c6c;
        vertical-align: -3px;
      }

      &__text {
        display: inline-block;
        vertical-align: middle;
        line-height: 1.3em;
        width: 80%;
      }

      &::after {
        content: "";
        display: inline-block;
        vertical-align: middle;
        height: 100%;
      }
    }

    .border-right0 {
      border-right: 0;
    }

    &-content {
      display: inline-block;
      vertical-align: top;
      padding: 8px;
      height: calc(100% - 16px);

      &.noLabel {
        border-left: 1px solid #ebeef3;
      }

      &::after {
        content: "";
        display: inline-block;
        vertical-align: middle;
        height: 100%;
      }

      &.align-top {
        &::after {
          content: "";
          vertical-align: top;
        }
      }

      &.noPadding {
        padding: 0;
      }
    }

    .el-table th {
      background-color: #f9fafd;
    }

    .el-radio {
      margin-right: 15px;
    }

    .el-radio__label {
      font-size: 12px;
    }

    .el-input--small .el-input__inner {
      font-size: 12px;
    }

    .el-checkbox {
      font-size: 12px;
    }

    .el-checkbox__label {
      font-size: 12px;
      vertical-align: -2px;
    }

    .el-select {
      width: 100%;
    }

    .el-cascader {
      width: 100%;
    }

    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
      width: 100%;
    }

    .el-textarea__inner {
      height: 80px;
    }
    .page-form-item-content {
      height: 100%;
      flex: 1;
      display: flex;
      align-items: center;
      .text-box {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        cursor: pointer;
      }

      .slider-box {
        display: flex;
        justify-content: space-between;

        &:first-child {
          flex: 1;
        }
      }
    }
  }

  .page-form-item2{
    width: 50%;
  }
  .page-form-item3{
    width: 100%;
  }
  .page-form-item4{
    width: 25%;
  }
}
</style>
